<template>
  <div>
    <!-- 新增设备 -->
    <el-dialog
      class="dialog"
      title="人员详情"
      :visible="dialogWork"
      width="45%"
      @close="closeDialog"
      @open="openDialog"
    >
      <el-card class="top">
        <el-row type="offset">
          <el-col
            :span="8"
          >人员名称:<span>{{ userList.userName }}</span></el-col>
          <el-col
            :span="8"
          >角色:<span>{{ userList.roleName }}</span></el-col>
          <el-col
            :span="8"
          >联系电话:<span>{{ userList.mobile }}</span></el-col>
          <el-col
            :span="8"
            class="row"
          >负责区域:<span>{{ userList.regionName }}</span></el-col>
        </el-row>
      </el-card>
      <div class="table">
        <el-row type="type" align="middle" justify="center">
          <table border="" class="table-padding">
            <tr>
              <th />
              <th>总工单数</th>
              <th>拒绝工单</th>
              <th>完成工单</th>
              <th>进行中工单</th>
            </tr>
            <tr>
              <td>本周</td>
              <td>{{ WeekObj.total }}</td>
              <td>{{ WeekObj.cancelCount }}</td>
              <td>{{ WeekObj.workCount }}</td>
              <td>{{ WeekObj.progressTotal }}</td>
            </tr>
            <tr>
              <td>本月</td>
              <td>{{ MonthObj.total }}</td>
              <td>{{ MonthObj.cancelCount }}</td>
              <td>{{ MonthObj.workCount }}</td>
              <td>{{ MonthObj.progressTotal }}</td>
            </tr>
            <tr>
              <td>本年</td>
              <td>{{ YearObj.total }}</td>
              <td>{{ YearObj.cancelCount }}</td>
              <td>{{ YearObj.workCount }}</td>
              <td>{{ YearObj.progressTotal }}</td>
            </tr>
          </table>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWeekDay, getDateEnd, getDateStartTime, getDateEndTime, getYear } from '@/utils/getTime'
import { getUser, userWeenk } from '@/api/userIndex'
export default {
  props: {
    dialogWork: {
      type: Boolean,
      default: false
    },
    userObj: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      userList: {},
      timeWeenk: {
        userId: '',
        start: `${getWeekDay(getDateEnd())[0]} 00:00:00`,
        end: `${getDateEnd()} 23:59:59`
      },
      WeekObj: {},
      timeMonth: {
        userId: '',
        start: getDateStartTime(),
        end: getDateEndTime()
      },
      MonthObj: {},
      tiemYear: {
        userId: '',
        start: getYear(),
        end: getDateEndTime()
      },
      YearObj: {}
    }
  },
  methods: {
    closeDialog() {
      this.$emit('close')
    },
    async openDialog() {
      const { data } = await getUser(this.userObj.userId)
      this.userList = data
      this.timeWeenk.userId = this.userObj.userId
      this.timeMonth.userId = this.userObj.userId
      this.tiemYear.userId = this.userObj.userId
      const { data: weenk } = await userWeenk(this.timeWeenk)
      this.WeekObj = weenk
      const { data: month } = await userWeenk(this.timeMonth)
      this.MonthObj = month
      const { data: year } = await userWeenk(this.tiemYear)
      this.YearObj = year
    }
  }
}
</script>

<style lang="scss">
.row {
  margin-top: 20px;
}
.top {
  background: #f3f6fb;
}
.table {
  margin-top: 30px;
}

.table-padding {
  th {
    background-color: #f3f6fb;
    color: #666666;
    font-size: 14px;
    font-weight: 400;
    width: 200px;
    padding: 10px;
  }
  td {
    width: 200px;
    padding: 10px;
  }
  border: 1px solid #d8dde3;
  border-collapse: collapse;
  width: 600px;
  height: 80px;
  text-align: center;
}
</style>
